<template>
  <div>

    <el-row v-if="gameOptions" class="gameClass">
      <button v-for="(item,index) in gameOptions" @click="changeGame(item)" :key="index" :class="selectedGame.value === item.value?'isGameClassBtn':''">
       {{item.label}}
      </button>
    </el-row>

    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>自动降赔</span>
      </ul>
      <ul class="bread-nav-content-right">
        <button>
          刷新
        </button>
      </ul>
    </el-row>

    <el-row class="baseOdd-content" v-if="nowGameOdd">
      <table class="top-table">
        <tbody>
        <tr>
          <td v-for="(list,index) in nowGameOdd" :key="index">
            <table class="gameOdds">
              <thead>
              <tr>
                <th>
                  交易类型
                </th>
                <th>
                  额度<span class="eDu">({{baseOdd.amount_mode}})</span>
                </th>
                <th>
                  降赔率
                </th>
                <th>
                  最大降赔率
                </th>
                <th>
                  勾选
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index1) in list" :key="index1" class="gameOdds-info">
                <td>
                  {{item.name}}
                </td>
                <td>
                  <input type="text" @keydown="onlyNum(item.amount, $event)" v-model="item.amount">
                </td>
                <td>
                  <input type="text" @keydown="onlyNum(item.reduce_odds, $event)" v-model="item.reduce_odds">
                </td>
                <td>
                  <input type="text" @keydown="onlyNum(item.max_reduce_odds, $event)" v-model="item.max_reduce_odds">
                </td>
                <td>
                  <el-checkbox v-model="item.checked" @change="changeCheckbox()"></el-checkbox>
                </td>
              </tr>
              </tbody>
            </table>
          </td>
        </tr>
        </tbody>
      </table>
    </el-row>


    <el-row class="baseOdd-footer" v-if="baseOdd">
      <ul>
        <span>快速设置</span>
      </ul>
      <ul>
        <el-checkbox v-model="checked_amount">额度<span class="eDu">({{baseOdd.amount_mode}})</span>:</el-checkbox>
        <input type="text" @keydown="onlyNum(text_amount, $event)" v-model="text_amount">
      </ul>
      <ul>
        <el-checkbox v-model="checked_reduce_odds">降赔率:</el-checkbox>
        <input type="text" @keydown="onlyNum(text_reduce_odds, $event)" v-model="text_reduce_odds">
      </ul>
      <ul>
        <el-checkbox v-model="checked_max_reduce_odds">最大降赔率:</el-checkbox>
        <input type="text" @keydown="onlyNum(text_max_reduce_odds, $event)" v-model="text_max_reduce_odds">
      </ul>
      <ul>
        <button @click="transferBtn">传送</button>
        <el-checkbox v-model="chooseAll" @change="toChooseAll">全选</el-checkbox>
        <button @click="selectOther">反选</button>
      </ul>
    </el-row>

    <el-row class="baseOdd-footer-top">
      <ul class="baseOdd-footer-top-left">
        <span>
          二面长龙/遗漏
        </span>
      </ul>
      <ul>
        <el-radio v-model="baseOdd.open" label="1">启用</el-radio>
        <el-radio v-model="baseOdd.open" label="0">停用</el-radio>
        <button @click="clearBtn">清零</button>
        <span>*注 ： 超过30期按30期值</span>
        <el-checkbox v-model="execute_mode_1" @change="executeModeChecked(1)">开盘执行（基于当前开奖结果)</el-checkbox>
        <el-checkbox v-model="execute_mode_2" @change="executeModeChecked(2)">开奖执行(基于上一期结果)</el-checkbox>
      </ul>
    </el-row>

    <el-row class="baseOdd-footer-middle" v-if="nowOddsReduce">
      <table style="width: 100%">
        <tr>
          <td v-for="(list, index) in nowOddsReduce" :key="index">
            <table class="gameOdds">
              <thead>
              <tr>
                <th>N期</th>
                <th>没出降</th>
                <th>连出降</th>
                <th>遗漏降</th>
              </tr>
              </thead>
              <tbody>
              <tr class="gameOdds-info" v-for="(item, subIndex) in list" :key="subIndex">
                <td>{{item.name}}</td>
                <td>
                  <input type="text" @keydown="onlyNum(item.lm_straight_absent, $event)" v-model="item.lm_straight_absent">
                </td>
                <td>
                  <input type="text" @keydown="onlyNum(item.lm_straight_appeared, $event)" v-model="item.lm_straight_appeared">
                </td>
                <td>
                  <input type="text" @keydown="onlyNum(item.num_straight_absent, $event)" v-model="item.num_straight_absent">
                </td>
              </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </table>
    </el-row>
    <el-row class="baseOdd-bottom">
      <button @click="subBtn">确认</button>
      <button @click="cancelBtn">取消</button>
    </el-row>

    <el-dialog
      title="用户提示"
      :visible.sync="dialogVisible"
      width="30%">
      <ul class="myDialog">
        <li>
          <span>{{messTip}}</span>
        </li>
        <li>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </li>
      </ul>
    </el-dialog>

  </div>
</template>

<script>
  import { Message } from 'element-ui'
  import { mapGetters } from 'vuex'
  export default {
    name: 'oddsReduce',
    computed: {
      ...mapGetters([
        'gameOptions', // 彩种列表
      ]),
    },
    methods: {
      // 开盘、开奖执行复选框
      executeModeChecked(type) { // type === 1 即开盘执行
        if (type === 1) {
          if (this.execute_mode_1) {
            this.baseOdd.execute_mode_1 = '1'
          } else {
            this.baseOdd.execute_mode_1 = '0'
          }
        } else {
          if (this.execute_mode_2) {
            this.baseOdd.execute_mode_2 = '1'
          } else {
            this.baseOdd.execute_mode_2 = '0'
          }
        }
        console.log(this.baseOdd.execute_mode_1)
      },
      // 清零按钮
      clearBtn() {
        for (const key in this.nowOddsReduce) {
          for (const index in this.nowOddsReduce[key]) {
            this.nowOddsReduce[key][index].lm_straight_absent = 0
            this.nowOddsReduce[key][index].lm_straight_appeared = 0
            this.nowOddsReduce[key][index].num_straight_absent = 0
          }
        }
      },
      // 切换游戏
      changeGame(value) {
        this.selectedGame = value
        this.getOddsReduce()
      },
      // 获取彩种列表
      getGameOptions() {
        this.$store.dispatch('GameOptionss')
        this.selectedGame = this.gameOptions[0]
      },
      // 控制键盘输入，只允许输入数字与小数点
      onlyNum(value, e) {
        // if (!(event.keyCode === 46) && !(event.keyCode === 8) && !(event.keyCode === 37) && !(event.keyCode === 39)) {
        //   if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) {
        //     event.returnValue = false
        //   }
        // }
        let isOK = false
        const key = window.event ? e.keyCode : e.which
        console.log('0000000000000', key)
        if ((key > 95 && key < 106) || // 小键盘上的0到9
          (key > 47 && key < 60) || // 大键盘上的0到9
          (key === 110 && value.indexOf('.') < 0) || // 小键盘上的.而且以前没有输入.
          (key === 190 && value.indexOf('.') < 0) || // 大键盘上的.而且以前没有输入.
          key === 8 || key === 9 || key === 46 || key === 37 || key === 39 // 不影响正常编辑键的使用(8:BackSpace;9:Tab;46:Delete;37:Left;39:Right)
        ) {
          isOK = true
        } else {
          if (window.event) { // IE
            e.returnValue = false // event.returnValue=false 效果相同.
          } else { // Firefox
            e.preventDefault()
          }
        }
        e.returnValue = isOK
      },
      // 传送
      transferBtn() {
        let showTip = true
        for (const key in this.nowGameOdd) {
          for (const index in this.nowGameOdd[key]) {
            if (this.nowGameOdd[key][index].checked) {
              if (this.checked_amount) {
                showTip = false
                this.nowGameOdd[key][index].amount = Math.round(this.text_amount * 100) / 100
              }
              if (this.checked_reduce_odds) {
                showTip = false
                this.nowGameOdd[key][index].reduce_odds = Math.round(this.text_reduce_odds * 100) / 100
              }
              if (this.checked_max_reduce_odds) {
                showTip = false
                this.nowGameOdd[key][index].max_reduce_odds = Math.round(this.text_max_reduce_odds * 100) / 100
              }
            }
          }
        }
        if (showTip) {
          this.messTip = '请选择下注类别及修改项目！'
          this.dialogVisible = true
        }
      },
      // 选择全部
      toChooseAll() {
        for (const key in this.nowGameOdd) {
          for (const index in this.nowGameOdd[key]) {
            this.nowGameOdd[key][index].checked = this.chooseAll
          }
        }
      },
      // 反选
      selectOther() {
        this.chooseAll = false
        for (const key in this.nowGameOdd) {
          for (const index in this.nowGameOdd[key]) {
            this.nowGameOdd[key][index].checked = !this.nowGameOdd[key][index].checked
          }
        }
        // 强制刷新
        this.$forceUpdate()
      },
      // 提交
      subBtn() {
        let isDiff = true // 判断是否改变了数据
        for (const key in this.nowGameOdd) { // 检查list1里的数据是否改变
          for (const index in this.nowGameOdd[key]) {
            for (const subIndex in this.nowGameOdd[key][index]) {
              if (this.nowGameOdd[key][index][subIndex] !== this.beforeOdd[key][index][subIndex]) {
                console.log('before', this.nowGameOdd[key][index][subIndex])
                console.log(this.beforeOdd[key][index][subIndex])
                isDiff = false
                break
              }
            }
          }
        }
        if (this.nowOddsReduce) {
          for (const key in this.nowOddsReduce) { // 检查list1里的数据是否改变
            for (const index in this.nowOddsReduce[key]) {
              for (const subIndex in this.nowOddsReduce[key][index]) {
                if (this.nowOddsReduce[key][index][subIndex] !== this.beforeOddsReduce[key][index][subIndex]) {
                  console.log('before', this.nowOddsReduce[key][index][subIndex])
                  console.log(this.beforeOddsReduce[key][index][subIndex])
                  isDiff = false
                  break
                }
              }
            }
          }
        }
        for (const key in this.baseOdd) { // 检查list1里的数据是否改变
          if (!Array.isArray(this.baseOdd[key])) {
            if (this.baseOdd[key] !== this.beforeBaseOdd[key]) {
              console.log('before', this.beforeBaseOdd[key])
              console.log(this.baseOdd[key])
              isDiff = false
              break
            }
          }
        }
        if (isDiff) {
          this.messTip = '未有数据变更！请修改后再提交！'
          this.dialogVisible = true
        } else {
          if (window.confirm('你确定要提交修改吗？')) {
            // 设置请求参数
            const temp = {}
            temp['list1'] = []
            if (this.nowOddsReduce) {
              temp['list2'] = []
            }
            for (const key in this.nowGameOdd) {
              for (const index in this.nowGameOdd[key]) {
                temp.list1.push(this.nowGameOdd[key][index])
              }
            }
            if (this.nowOddsReduce) {
              for (const key in this.nowOddsReduce) {
                for (const index in this.nowOddsReduce[key]) {
                  temp.list2.push(this.nowOddsReduce[key][index])
                }
              }
            }
            for (const key in temp.list1) {
              delete temp.list1[key].checked
              delete temp.list1[key].name
              delete temp.list1[key].game
            }
            const params = {}
            params['game'] = this.selectedGame.value
            params['open'] = this.baseOdd.open
            params['execute_mode_1'] = this.execute_mode_1 ? '1' : '0'
            params['execute_mode_2'] = this.execute_mode_2 ? '1' : '0'
            params['params'] = temp
            console.log('自主降赔参数', params)
            // 请求接口，保存修改
            this.$store.dispatch('SaveOddsReduce', params)
              .then(response => {
                Message.success(response.message)
              })
            return true
          } else {
            return false
          }
        }
      },
      cancelBtn() {
        this.nowGameOdd = JSON.parse(JSON.stringify(this.beforeOdd))
        this.nowOddsReduce = JSON.parse(JSON.stringify(this.beforeOddsReduce))

        if (this.beforeBaseOdd.execute_mode_1 === '0') {
          this.execute_mode_1 = false
        } else {
          this.execute_mode_1 = true
        }
        if (this.beforeBaseOdd.execute_mode_2 === '0') {
          this.execute_mode_2 = false
        } else {
          this.execute_mode_2 = true
        }
      },
      changeCheckbox() {
        // 点击单选框强制刷新
        this.$forceUpdate()
      },
      getOddsReduce() {
        // 请求接口数据
        this.nowGameOdd = []
        this.nowOddsReduce = []
        this.beforeOdd = []
        this.beforeOddsReduce = []
        this.beforeBaseOdd = []
        this.$store.dispatch('GetOddsReduce', { game: this.selectedGame.value })
          .then(response => {
            this.baseOdd = response[this.selectedGame.label]
            this.beforeBaseOdd = JSON.parse(JSON.stringify(this.baseOdd))

            if (this.baseOdd.execute_mode_1 === '0') {
              this.execute_mode_1 = false
            } else {
              this.execute_mode_1 = true
            }
            if (this.baseOdd.execute_mode_2 === '0') {
              this.execute_mode_2 = false
            } else {
              this.execute_mode_2 = true
            }

            console.log('接口返回的参数', response)
            if (response.data === undefined) {
              if (response[this.selectedGame.label].list1) {
                // 为list1里的数据添加复选框的字段checked
                for (const index in response[this.selectedGame.label].list1) {
                  response[this.selectedGame.label].list1[index]['checked'] = false
                }
                // 将list1分成2份
                const halfLength = parseInt(response[this.selectedGame.label].list1.length / 2)
                this.$set(this.nowGameOdd, 0, response[this.selectedGame.label].list1.slice(0, halfLength))
                this.$set(this.nowGameOdd, 1, response[this.selectedGame.label].list1.slice(halfLength))
                const list = JSON.parse(JSON.stringify(this.nowGameOdd))
                if (list.length > 0) {
                  for (let a = 0; a < list.length; a++) {
                    this.beforeOdd.push(list[a])
                  }
                }
              }
              if (response[this.selectedGame.label].list2) {
                // 将list2数组分成5份
                const listLength = parseInt(response[this.selectedGame.label].list2.length / 5)
                this.$set(this.nowOddsReduce, 0, response[this.selectedGame.label].list2.slice(0, listLength))
                this.$set(this.nowOddsReduce, 1, response[this.selectedGame.label].list2.slice(listLength, listLength * 2))
                this.$set(this.nowOddsReduce, 2, response[this.selectedGame.label].list2.slice(listLength * 2, listLength * 3))
                this.$set(this.nowOddsReduce, 3, response[this.selectedGame.label].list2.slice(listLength * 3, listLength * 4))
                this.$set(this.nowOddsReduce, 4, response[this.selectedGame.label].list2.slice(listLength * 4))
                const list2 = JSON.parse(JSON.stringify(this.nowOddsReduce))
                if (list2.length > 0) {
                  for (let a = 0; a < list2.length; a++) {
                    this.beforeOddsReduce.push(list2[a])
                  }
                }
              }
            } else {
              this.nowGameOdd = null
              Message.error(response.message)
            }
            console.log('自动降赔list2', this.nowOddsReduce)
            console.log('自动降赔', response)
          })
      },
    },
    created() {
      this.getGameOptions()
      this.getOddsReduce()
    },
    data() {
      return {
        execute_mode_1: false, // 开盘执行复选框
        execute_mode_2: false, // 开盘执行复选框
        checked_amount: '', // 额度复选框
        checked_reduce_odds: '', // 降赔率复选框
        checked_max_reduce_odds: '', // 最大降赔率复选框
        text_amount: '', // 下方额度文本框
        text_reduce_odds: '', // 下方降赔率文本框
        text_max_reduce_odds: '', // 下方最大降赔率文本框
        chooseAll: false, // 全选复选框
        dialogVisible: false,
        messTip: '', // 弹窗提示
        checkTogether: '', // 设置是否统一设置
        sameGame: [], // 相同的游戏
        baseOdd: '', // 游戏的基准赔率
        beforeBaseOdd: '', // 修改前的自动赔率
        nowGameOdd: [], // 当前游戏基准赔率
        beforeOdd: [],
        nowOddsReduce: [],
        beforeOddsReduce: [],
        selectedGame: {},
        selecteData: [{
          value: 'gdklsf',
          label: '广东快乐十分',
        }, {
          value: 'bjpk10',
          label: '北京PK10',
        }, {
          value: 'cqssc',
          label: '重庆时时彩',
        }],
      }
    },
  }
</script>

<style scoped>
  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav img{
    display: block;
    float: left;
    margin-top: 4px;
    padding-right: 5px;
  }
  .bread-nav-content{
    padding-left: 10px;
    float: left;
  }
  .bread-nav-content select{
    height:20px;
    line-height: 20px;
    margin-top: 5px;
  }
  .bread-nav-content-right{
    float: right;
  }
  .bread-nav-content-right button{
    border:0;
    background-color: rgba(0, 0, 0, 0);
    color:#386399;
    font-weight: bold;
  }
  .bread-nav-content-right button:hover{
    text-decoration: underline;
  }
  .nav-button{
    color:#FFF;
    width: 103px;
    height: 28px;
    font-weight: bold;
    font-size: 14px;
    line-height: 28px;
    border:none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color:#1554BE ;
    margin: 0 2px;
  }
  .nav-button:hover{
    text-decoration: underline;
  }
  .nav-buttonSelected{
    color:#ff8c3f;
  }

  .baseOdd-content{
    width: 100%;
    padding: 10px;
  }
  .top-table{
    width: 100%
  }
  .top-table td{
    vertical-align: top;
  }
  .baseOdd-top{
    display: flex;
    height:28px;
    line-height: 28px;
    margin-top: 10px;
  }
  .baseOdd-top ul{
    margin-left: 10px;
  }
  .gameOdds{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .gameOdds th{
    box-shadow: inset 0px -14px 19px 2px #CAE8F6;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .gameOdds td{
    height: 25px;
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
  }
  .gameOdds input[type='text']{
    width:60px;
    display:inline-block;
    height:20px;
    font-weight: lighter;
    ime-mode:Disabled
  }
  .gameOdds-info{

  }
  .gameOdds-info:hover{
    background-color: #CAE8F6;
  }
  .baseOdd-middle{
    display: flex;
    text-align: center;
    justify-content: center;
    font-size:13px;
    height:30px;
    line-height: 30px;
  }
  .baseOdd-middle ul{
    padding: 0 10px;
  }
  .baseOdd-middle ul button{
    border:none;
    outline: none;
    background-color: rgba(0,0,0,0);
    color:red;
    cursor: pointer;
  }
  .baseOdd-middle ul button:hover{
    text-decoration: underline;
  }

  .baseOdd-footer{
    display: flex;
    text-align: center;
    justify-content: center;
    font-size:13px;
    height:30px;
    line-height: 30px;
  }
  .baseOdd-footer ul{
    padding: 0 5px;
  }
  .baseOdd-footer ul input[type='text']{
    width:60px;
    display: inline-block;
  }
  .baseOdd-footer ul button{
    color: #fae7e9;
    border: solid 1px #cf7878;
    background: #da5867;
    background: -webkit-gradient(linear,left top,left bottom,from(#ca7886),to(#be5c6c));
    background: -moz-linear-gradient(top,#f16c7c,#bf404f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',endColorstr='#bf404f');
    margin-right: 10px;
    height: 22px;
    width: 85px;
    line-height: 22px;
  }
  .baseOdd-footer ul button:hover{
    color:#fff100;
  }
  .baseOdd-bottom{
    text-align: center;
    margin-top: 20px;
  }
  .baseOdd-bottom button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    border: 0px;
    background-color: #487BD1;
    border-radius: 5px;
  }
  .baseOdd-bottom button:hover{
    background-color: #7bb1d0;
    color:#fff100;
  }
  .myDialog li{
    padding: 10px 0;
    overflow: hidden;
  }
  .myDialog button{
    float: right;
  }
  .baseOdd-footer-top{
    height:30px;
    line-height: 30px;
    text-align: center;
    margin: 20px 10px 0 10px;
    border-bottom: 1px solid #B9C2CB;
  }
  .baseOdd-footer-top button{
    color: #fae7e9;
    border: solid 1px #cf7878;
    background: #da5867;
    background: -webkit-gradient(linear,left top,left bottom,from(#ca7886),to(#be5c6c));
    background: -moz-linear-gradient(top,#f16c7c,#bf404f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',endColorstr='#bf404f');
    height: 22px;
    width: 85px;
    line-height: 22px;
    margin: 0 10px;
  }
  .baseOdd-footer-top button:hover{
    color:#fff100;
  }
  .baseOdd-footer-top span{
    margin: 0 10px;
  }
  .baseOdd-footer-top input[type='text']{
    width:60px;
    margin-right: 20px;
  }
  .baseOdd-footer-top .el-radio{
    margin: 0 5px;
  }
  .baseOdd-footer-top .el-checkbox{
    margin: 0 5px;
  }
  .baseOdd-footer-top ul{

  }
  .baseOdd-footer-top-left{
    float:left;
    border: 1px solid #B9C2CB;
    border-bottom: none;
  }
  .baseOdd-footer-top-left span{
    color: #274d98;
    box-shadow: inset 0px 10px 15px 2px #CAE8F6;
    display: block;
    width: 98px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    text-shadow: 1px 1px 0 white;
    margin: 0 5px 0 0;
    text-align: center;
    text-decoration: none;
    padding: 0;
    margin: 0;
  }
  .eDu{
    color:red
  }
  .baseOdd-footer-middle{
    padding: 10px;
  }

  .gameClass{
    background-color: #3f8cdc;
    padding: 0 10px;
  }
  .gameClass button{
    border:none;
    background-color: rgba(0,0,0,0);
    float: left;
    cursor: pointer;
    font-size:13px;
    color: #fff;
    height:30px;
    line-height: 30px;
    font-weight: bold;
  }
  .gameClass button:hover{
    text-decoration: underline;
    color:#fff100;
  }
  .isGameClassBtn{
    color:#fff100 !important;
  }
</style>
